iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
2
Modern Web

技術在走,Vue.js 要有系列 第 30

|D30| 照慣例,完賽心得和總目錄

  • 分享至 

  • xImage
  •  

心得

終於迎來完賽時刻!
恭喜好想的夥伴都撐過了!
30 天被 Slack 追殺壓力山大阿!

回想 30 天前說要寫個技術系列文,但讀原始碼對我來說,就像踏進黑洞,不懂的還是太多了!!
而且沒有庫存每天剩餘時間也不多,一週產一篇文章還差不多...

Anyway,雖然沒有很懂 Vue 原始碼,但淺看一次它的運作流程跟機制,收集到很多關鍵字,作為往後查資料用也不錯。

今年鐵人賽看到兩個有趣系列,滷肉飯跟甜點情人,身為臺南人那我下次寫個牛肉湯好了!

總目錄

Vue 的渲染機制有稍微調整一下文章閱讀順序

口水文

|D1| 總是要開場白一下

創建 Vue 專案

用 terminal 建立專案過程會詢問滿多問題,紀錄下來以救助我的金魚腦
|D2| Vue CLI3 安裝與建立 vue 專案

Vue 的渲染機制

透過 Virtual DOM 讓我們不用操作真正的 DOM,達到優化效能目的。
而用new 關鍵字把 Vue 實例化後,會有一連串過程,創建 vnode、掛上 DOM 等等
|D4| 從原始碼看 Vue 渲染機制 (2) - Virtual DOM
|D3| 從原始碼看 Vue 渲染機制 (1) - new Vue 做了什麼
|D5| 從原始碼看 Vue 渲染機制 (3) - createElement
|D7| 從原始碼看 Vue 渲染機制 (5) - $mount
|D6| 從原始碼看 Vue 渲染機制 (4) - render

Vue 的元件化

|D8| 從原始碼看 Vue 元件化 (1) - 概念介紹
|D9| 從原始碼看 Vue 元件化 (2) - createComponent
|D10| 從原始碼看 Vue 元件化 (3) - patch
|D11| 從原始碼看 Vue 元件化 (4) - updateChildren,更新和移動子節點
|D12| 從原始碼看 Vue 元件化 (5) - updateChildren,新增和刪除子節點

|D13| 從原始碼看 Vue 元件化 (6) - 元件註冊

|D14| 從原始碼看 Vue 元件化 (7) - 異步元件

Vue 的響應式

|D15| 從原始碼看 Vue 響應式原理 (1) - JS Object.defineProperty
|D16| 從原始碼看 Vue 響應式原理 (2) MVVM
|D17| 從原始碼看 Vue 響應式原理 (3) - Observer

|D18| 從原始碼看 Vue 響應式原理 (4) - Dep
|D19| 從原始碼看 Vue 響應式原理 (5) - Watcher
|D20| 從原始碼看 Vue 響應式原理 (6) - nextTick 異步更新
|D21| 從原始碼看 Vue 響應式原理 (7) - computed
|D22| 從原始碼看 Vue 響應式原理 (8) - watch

Vue 的擴展

|D23| 從原始碼看 Vue 擴展 (1) - 自定義 event
|D24| 從原始碼看 Vue 擴展 (3) - v-model

|D25| 從原始碼看 Vue 擴展 (4) - slot

自定義元件

|D26| 自定義元件的資料綁定與$event

Vuex 範例

|D27| vuex 表單處理

|D28| 用 vuex 實作資料操作

Vue Router 範例

|D29| vue-router 過場動畫


上一篇
|D29| vue-router 過場動畫
系列文
技術在走,Vue.js 要有30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
Chris
iT邦新手 3 級 ‧ 2019-10-15 20:55:16

恭喜完賽!!

mangoSu iT邦新手 5 級 ‧ 2019-10-15 21:40:51 檢舉

/images/emoticon/emoticon08.gif

0
Kira
iT邦新手 5 級 ‧ 2019-10-15 21:09:04

賀喜盲狗完成挑戰!

mangoSu iT邦新手 5 級 ‧ 2019-10-15 21:40:38 檢舉

恭喜我們都完賽惹!

0
letter liu
iT邦新手 5 級 ‧ 2019-10-15 22:40:40

學習精神真的好強,恭喜!

0
Titangene
iT邦新手 4 級 ‧ 2019-10-15 23:08:12

恭喜完賽!期待牛肉湯 (誤 XD

yachen iT邦新手 4 級 ‧ 2019-10-15 23:42:35 檢舉

牛肉湯++

0
PH
iT邦研究生 4 級 ‧ 2019-10-16 09:41:06

恭喜芒果~看到鐵人賽小幫手那張圖才意識到它也陪伴我們一個月了XD

0
tsuifei
iT邦新手 4 級 ‧ 2019-10-16 11:46:40

恭喜芒果完賽!!

0
Howard
iT邦新手 4 級 ‧ 2019-10-16 21:50:49

賀完賽/images/emoticon/emoticon64.gif

你最抖...

0
Askie Lin
iT邦新手 5 級 ‧ 2019-10-19 00:13:56

芒果一起抖抖抖

0
阿展展展
iT邦好手 1 級 ‧ 2020-02-28 11:14:19

發文鬧鐘好可愛XDD
恭喜完賽 恭喜獲得佳作

我要留言

立即登入留言